<template>
	<view class="report uni-common-pt">
		<view class="form form-a">
			<view class="form-group">
				<view class="form-item">
					<view class="form-item-header">当前位置：{{ name }}</view>
					<view class="form-item-body">
						<view class="card card-address">
							<textarea
								v-model="eventAddress"
								class="card-content"
								placeholder="请输入或选择定位获取位置信息">
							</textarea>
							<view class="card-icon" @tap="openMap">
								<image class="icon" src="@/static/icon/iv_location.png"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="panel">
					<view class="panel-header">
						<view class="form-item">
							<view class="form-item-header">积水情况：</view>
							<view class="form-item-body">
								<radio-group
									class="radio-group"
									@change.stop.prevent="radioChange($event, 'jsStatus')">
									<label class="radio-item" v-for="(radio, index) in hydropsStatuses" :key="index">
										<view class="radio-item-header">
											<radio :value="radio.value" :checked="params['jsStatus'] == radio.value" />
										</view>
										<view class="radio-item-body">{{ radio.label }}</view>
									</label>
								</radio-group>
							</view>
						</view>
					</view>

					<view class="panel-body" v-show="params.jsStatus !== '1'">
						<view class="form-item form-item-hor">
							<view class="form-item-header">积水深度：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.jsDepth" />
							</view>
							<view class="form-item-right">
								厘米
							</view>
						</view>
						<view class="form-item form-item-hor">
							<view class="form-item-header">积水时长：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.jsTimes" />
							</view>
							<view class="form-item-right">
								分钟
							</view>
						</view>
						<view class="form-item form-item-hor">
							<view class="form-item-header">积水面积：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.jsAreas" />
							</view>
							<view class="form-item-right">
								平方米
							</view>
						</view>
						<view class="form-item form-item-hor" v-if="roleKey == 'jgczry' || roleKey == 'czry'">
							<view class="form-item-header">出动防汛人员数量：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.scenePerson" />
							</view>
							<view class="form-item-right">
								人
							</view>
						</view>
					</view>
				</view>

				<view class="panel" v-if="roleKey == 'jgczry' || roleKey == 'czry'">
					<view class="panel-header">
						<view class="form-item">
							<view class="form-item">
								<view class="form-item-header">设备情况：</view>
							</view>
						</view>
					</view>
					<view class="panel-body">
						<view class="form-item form-item-hor">
							<view class="form-item-header">防汛车辆：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.sceneCar" />
							</view>
							<view class="form-item-right">
								台
							</view>
						</view>
						<view class="form-item form-item-hor">
							<view class="form-item-header">发动机：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.sceneEngine" />
							</view>
							<view class="form-item-right">
								台
							</view>
						</view>
						<view class="form-item form-item-hor">
							<view class="form-item-header">抽水泵：</view>
							<view class="form-item-body">
								<input class="form-control" v-model="params.scenePump" />
							</view>
							<view class="form-item-right">
								台
							</view>
						</view>
					</view>
				</view>


				<view class="form-item" v-if="roleKey == 'xjy'">
					<view class="form-item-header">责任单位人员是否到达现场：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene01')">
							<label class="radio-item" v-for="(radio, index) in statuses" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" :checked="params['scene01'] == radio.value"/>
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="form-item" v-if="roleKey == 'xjy'">
					<view class="form-item-header">物资设备是否到达现场：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene02')">
							<label class="radio-item" v-for="(radio, index) in statuses" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" :checked="params['scene02'] == radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>


				<view class="form-item" v-if="roleKey == 'jgczry' || roleKey == 'czry'">
					<view class="form-item-header">现场作业方式：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene06')">
							<label class="radio-item col-2" v-for="(radio,index) in drainageMethods" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-header">现场是否设置警示牌：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene03')">
							<label class="radio-item" v-for="(radio, index) in statuses" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" :checked="params['scene03'] == radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form-item" v-if="roleKey == 'jgczry' || roleKey == 'czry'">
					<view class="form-item-header">作业状态：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene052')">
							<label class="radio-item" v-for="(radio, index) in jobStatuses" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="form-item" v-if="roleKey == 'xjy'">
					<view class="form-item-header">现场是否影像正常通行：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene04')">
							<label class="radio-item" v-for="(radio, index) in statuses" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" :checked="params['scene04'] == radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="form-item" v-if="roleKey == 'xjy'">
					<view class="form-item-header">现场作业状态：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene051')">
							<label class="radio-item" v-for="(radio, index) in jobStatuses1" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="panel">
					<view class="panel-header">
						<view class="form-item">
							<view class="form-item-header">现场情况拍摄：</view>
						</view>
					</view>
					<view class="panel-body">
						<view class="form-item">
							<view class="form-item-header">拍摄照片：</view>
							<view class="form-item-body">
								<view class="list list-p">
									<view class="list-group">
										<view class="list-item" v-for="(baseImage, index) in images.baseImages"
											:key="index">
											<view class="card card-a" @tap="viewPic(images,index)">
												<view class="card-header">
												</view>
												<view class="delete" @tap.stop.prevent="delPic(images,index)">
													<image class="icon" mode="aspectFit"
														src="@/static/icon/delete-icon.png"></image>
												</view>
												<view class="card-body">
													<image class="icon" mode="aspectFit" :src="baseImage"></image>
												</view>
											</view>
										</view>

										<view class="list-item">
											<view class="card card-a upload" @tap="getPic(images)">
												<view class="card-body">
													<image class="icon" mode="aspectFit"
														src="@/static/icon/iv_pic_add.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-item-header">拍摄视频：</view>
							<view class="form-item-body" v-show="images.video">
								<view class="video-box">
									<video class="video" :src="images.video"></video>
								</view>
							</view>
						</view>
						<view class="btns">
							<view class="btns-group">
								<button class="btn btn-a" @tap="getVideo(images)">拍摄视频</button>
							</view>
						</view>

					</view>
				</view>

				<view class="form-item">
					<view class="form-item-header">是否存在其他紧急事项：</view>
					<view class="form-item-body">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, 'scene07')">
							<label class="radio-item" v-for="(radio, index) in statuses" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" :checked="params['scene07'] == radio.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view v-show="params.scene07 == '1'">
					<view class="form-item">
						<view class="form-item-header">紧急事项描述：</view>
						<view class="form-item-body">
							<textarea class="form-control form-control-a" v-model="params.scene07Remark"></textarea>
						</view>
					</view>

					<view class="panel">
						<view class="panel-header">
							<view class="form-item">
								<view class="form-item-header">紧急事项拍摄：</view>
							</view>
						</view>
						<view class="panel-body">
							<view class="form-item">
								<view class="form-item-header">拍摄照片：</view>
							</view>
							<view class="form-item-body">
								<view class="list list-p">
									<view class="list-group">
										<view class="list-item" v-for="(baseImage, index) in otherImages.baseImages"
											:key="index">
											<view class="card card-a" @tap="viewPic(otherBaseImages,index)">
												<view class="card-header">
												</view>
												<view class="delete" @tap.stop.prevent="delPic(otherBaseImages,index)">
													<image class="icon" mode="aspectFit"
														src="@/static/icon/delete-icon.png">
													</image>
												</view>
												<view class="card-body">
													<image class="icon" mode="aspectFit" :src="baseImage"></image>
												</view>
											</view>
										</view>

										<view class="list-item">
											<view class="card card-a upload" @tap="getPic(otherImages)">
												<view class="card-body">
													<image class="icon" mode="aspectFit" src="@/static/icon/iv_pic_add.png">
													</image>
												</view>
											</view>
										</view>
									</view>
								</view>

							</view>

							<view class="form-item">
								<view class="form-item-header">拍摄视频：</view>
								<view class="form-item-body" v-show="otherImages.video">
									<view class="video-box">
										<video class="video" :src="otherImages.video"></video>
									</view>
								</view>
							</view>

							<view class="btns">
								<view class="btns-group">
									<button class="btn btn-a" @tap="getVideo(otherImages)">拍摄视频</button>
								</view>
							</view>

						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="btns">
			<view class="btns-group">
				<button class="btn btn-a" @tap="bindReport">上报</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { insertSzbmJsdBusinessMiddleReport, insertSzbmJsdBusinessMiddleReportVideo } from '@/api/configure.js';
	import {chooseImage, deepClone, mergeUrls, getUserInfo, formatDateStr, getBaseImages, compressImage, previewImage ,cleanData} from '@/util/util.js';
	import configUrl from '@/util/url.js';
	export default {
		data() {
			return {
				userInfo: {},
				roleKey: '',
				jsdId: '',
				businessId: '',
				jsdType: '',
				gcjGeometry: '',
				longitude: '',
				latitude: '',
				gdx: '',
				gdy: '',
				status: '',
				name: '',
				eventAddress: '',
				images: {
					images: [],
					baseImages: [],
					video: ''
				},
				otherImages: {
					images: [],
					baseImages: [],
					video: ''
				},
				hydropsStatuses: [{
					label: '无积水',
					value: '1'
				}, {
					label: '轻度积水',
					value: '2'
				}, {
					label: '中度积水',
					value: '3'
				}, {
					label: '严重积水',
					value: '4'
				}],
				drainageMethods: [{
					value: '1',
					label: '人员清扫散排'
				}, {
					value: '2',
					label: '水泵抽排'
				}, {
					value: '3',
					label: '管网直排'
				}],
				jobStatuses1: [{
					value: '1',
					label: '作业中'
				}, {
					value: '2',
					label: '已完成'
				}, {
					value: '3',
					label: '未处理'
				}],
				jobStatuses: [{
					value: '1',
					label: '到达现场'
				}, {
					value: '2',
					label: '作业中'
				}, {
					value: '3',
					label: '已完成'
				}],
				statuses: [{
					value: '1',
					label: '是'
				}, {
					value: '0',
					label: '否'
				}],
				params: {
					createBy: '',
					businessId: '', // 任务id
					jsdId: '',		// 积水点id
					jsdType: '',	// 积水点类型
					jsStatus: '1',   // 积水情况
					jsDepth: null,    // 积水深度
					jsAreas: null,    // 积水面积
					jsTimes: null,    // 积水时间
					scene01: '0',    // 责任单位人员是否到达现场
					scene02: '0',	// 物资设备是否到达现场
					scene03: '0',	// 现场是否设置警示牌
					scene04: '0',	// 现场是否影响正常通行
					scene051: '',	// 现场作业状态(巡检)
					scene052: '',	// 现场作业状态(机构)
					scene06: '',	// 现场作业方式
					scene07: '0',	// 是否存在其他紧急事项
					scene07Remark: '', // 紧急事项描述
					scenePerson: null,   // 出动防汛人员数量
					sceneCar: null,      // 出动防汛车辆
					sceneEngine: null,   // 出动发动机
					scenePump: null,     // 出动抽水泵
					gcjGeometry: '',
					images: [{images: ''}],
					otherImages:[{images: ''}],
					isSend: '',
					status: ''
				}
			}
		},
		methods: {
			init() {
				uni.$on('receiveLocationData', this.getLocationData);

				this.userInfo = getUserInfo();

				if (this.userInfo) {
					this.roleKey = this.userInfo['role']['roleKey'];
				}
			},
			getLocationData({
				latitude,
				longitude,
				address
			}) {
				this.latitude = latitude;
				this.longitude = longitude;

				if(address){
					if(typeof address == 'string') {
						this.eventAddress = address;
					}
				}
			},
			openMap() {
				let params = {
					gdx: this.gdx,
					gdy: this.gdy,
					type: 'GET'
				}

				let url = mergeUrls('/pages/map/index', params);

				uni.navigateTo({
					url: url
				});
			},
			radioChange(e, name) {
				let val = e.target.value;

				this.params[name] = val;

				if(name == 'jsStatus' && val == '1') {
					this.params.jsDepth = null;    // 积水深度
					this.params.jsAreas = null;    // 积水面积
					this.params.jsTimes = null;    // 积水时间
				}
			},
			async getPic(obj) {
				var _this = this;
				let res = await chooseImage();

				let tempFilePaths = res.tempFilePaths.slice(0);

				obj.images = obj.images.concat(tempFilePaths);

				let baseImages = await getBaseImages(tempFilePaths);

				obj.baseImages = obj.baseImages.concat(baseImages);
			},
			delPic(obj, index) {
				obj.images.splice(index, 1);
				obj.baseImages.splice(index, 1);
			},
			viewPic(obj, index) {
				previewImage({
					urls: obj.images,
					current: index
				})
			},
			bindReport() {
				if(!this.latitude){
					uni.showToast({
					    title: '请选择定位获取位置信息',
					    duration: 2000,
						icon: 'none'
					});

					return
				}

				if(!this.eventAddress){
					uni.showToast({
					    title: '请输入位置信息',
					    duration: 2000,
						icon: 'none'
					});

					return
				}

				let data = {
					jsdId: this.jsdId,
					businessId: this.businessId,
					jsdType: this.jsdType,
					gcjGeometry: `${this.longitude} ${this.latitude}`,
					//status: '1' ,
					jsAreas: this.params.jsAreas,
					jsDepth: this.params.jsDepth,
					jsStatus: this.params.jsStatus,
					jsTimes: this.params.jsTimes,
					scene03: this.params.scene03,
					scene07: this.params.scene07,
					scene07Remark: this.params.scene07Remark,
					sceneCar: this.params.sceneCar,
					sceneEngine: this.params.sceneEngine,
					scenePerson: this.params.scenePerson,
					scenePump: this.params.scenePump,
					createBy: this.userInfo.userId,
					createUserRole: this.roleKey,
					status: this.params.scene07
				}

				if (this.roleKey == 'jgczry' || this.roleKey == 'czry') {
					data.scene06 = this.params.scene06;
					data.scene052 = this.params.scene052;
				} else if (this.roleKey == 'xjy') {
					data.scene01 = this.params.scene01;    	// 责任单位人员是否到达现场
					data.scene02 = this.params.scene02;		// 物资设备是否到达现场
					data.scene04 = this.params.scene04;
					data.scene051 = this.params.scene051;	// 现场作业状态(巡检)
				}else {

				}

				let params = cleanData(data);

				let images = this.images.baseImages.map( item => ({image: item.split(',')[1]}));
				let otherImages = this.otherImages.baseImages.map( item => ({image: item.split(',')[1]}));

				data.images = JSON.stringify(images);
				data.otherImages = JSON.stringify(otherImages);

				insertSzbmJsdBusinessMiddleReport(data).then( async (res) => {
					let { data: middlePatrolId } = res;

					if(this.images.video){
						let data = {
							video: this.images.video,
							middlePatrolId: middlePatrolId,
							sceneCode: '01'
						}

						await this.uploadVideo(data);
					}


					if (this.otherImages.video) {
						let data = {
							video: this.otherImages.video,
							middlePatrolId: middlePatrolId,
							sceneCode: '06'
						}

						await this.uploadVideo(data);
					}

					uni.showToast({
					    title: '操作成功',
					    duration: 2000,
						icon: 'none',
						mask: true
					});

					setTimeout(()=> {
						uni.navigateBack({
						    delta: 2
						});
					}, 2000);
				})
			},
			getVideo(obj) {
				uni.chooseVideo({
					count: 1,
				    sourceType: ['camera', 'album'],
					success: res => {
						obj.video = res.tempFilePath;
					}
				});
			},
			uploadVideo(obj) {
				return new Promise((resolve, reject) => {
					insertSzbmJsdBusinessMiddleReportVideo({
						middlePatrolId: obj.middlePatrolId,
						sceneCode: obj.sceneCode,
						isSend: 1,
					}, obj.video).then((res) => {
						resolve(res);
					}, ()=> {
						reject();
					});
				})
			},
			back() {
			    uni.navigateBack({
			        delta: 1
			    });
			}
		},
		onLoad(option) {
			this.jsdId = option.jsdId;
			this.jsdType = option.jsdType;
			this.businessId = option.businessId;
			this.name = option.name;
			this.address = option.address;
			this.gdx = option.gdx;
			this.gdy = option.gdy;

			this.init();
		},
		onUnload() {
			uni.$off('receiveLocationData');
		},
		onBackPress(options) {
			let _this = this;

			if (options.from === 'navigateBack') {
				return false;
			}

			uni.showModal({
			    content: '确定退出当前页面吗？',
			    success: function (res) {
			        if (res.confirm) {
			           _this.back();
			        } else if (res.cancel) {

			        }
			    }
			});

			return true;
		}
	}
</script>

<style lang="scss">
	.report{
		background-color: #ffffff;
	}
	.form {
		margin-bottom: 60rpx;
	}

	.form-a {
		.form-group {
			.form-item {
				margin-bottom: 20rpx;

				.form-item-header {
					margin-bottom: 20rpx;
					padding: 8rpx 0rpx 8rpx 30rpx;
					font-size: 28rpx;
					line-height: 120%;
					color: #767676;
				}

				.form-item-body {
					padding: 0rpx 30rpx;

					.form-control-static {
						min-height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
						box-sizing: border-box;
					}

					.form-control {
						width: 100%;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						border: 1px solid #c4c4c4;
						height: 56rpx;
						padding: 6rpx 16rpx;

						&.form-control-a {
							height: 200rpx;
							padding: 20rpx;
						}
					}
				}

				&.form-item-hor {
					margin-bottom: 20rpx;
					display: flex;

					.form-item-header {
						width: 270rpx;
						box-sizing: border-box;
						margin-bottom: 0rpx;
					}

					.form-item-body {
						padding: 0rpx 0rpx;
						width: calc(100% - 348rpx);
						box-sizing: border-box;
					}

					.form-item-right {
						width: 78rpx;
						padding: 8rpx 30rpx 8rpx 8rpx;
						font-size: 28rpx;
						line-height: 120%;
						text-align: right;
						color: #767676;
					}
				}
			}

			.form-item-tip {
				padding: 8rpx 30rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #d81e06;
			}
		}
	}



	.radio-group {
		display: flex;
		padding: 0px 10px;
		flex-wrap: wrap;
		width: auto;

		.radio-item {
			width: 33.3%;
			align-items: center;
			display: flex;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.radio-item-header {}

			.radio-item-body {
				padding: 0rpx 0rpx;
				font-size: 28rpx;
				color: #767676;
			}

			&.col-2 {
				width: 49.999%;
			}
		}
	}



	.card {}

	.card-address {
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-content {
			height: 120rpx;
			margin: 0rpx 100rpx 0rpx 0rpx;
			padding: 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			line-height: 120%;
			box-sizing: border-box;
			border: 1px solid #c4c4c4;
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			margin: 20rpx 0rpx 20rpx 10rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.card-a {
		width: 200rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-body {
			height: 143rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		&.upload {
			border: none;
		}

		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}

		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}



	.list {
		&.list-p {
			.list-group {
				display: flex;
				flex-wrap: wrap;

				.list-item {
					margin-bottom: 20rpx;
					width: 33.33%;
				}
			}
		}
	}

	.btns {
		background-color: #ffffff;

		.btns-group {
			padding: 17rpx 30rpx;
			display: flex;

			.btns-item {
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}

	}

	.btn {
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;

		&:after {
			display: none;
		}

		&.btn-a {
			background-color: #c4534c;
		}
	}

	.video-box {
		height: 200rpx;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.panel {
		.panel-header {}

		.panel-body {
			margin: 0rpx 20rpx;

			.form-item {
				.form-item-header {
					font-size: 24rpx;
				}

				&.form-item-hor{
					.form-item-right {
						font-size: 24rpx;
					}
				}
			}


		}
	}
</style>
